<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>JIMO-IOT-Oder</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="shortcut icon" href="//jimo.fun/img/my/jm.png"/>
    <link href="../../static/css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="../../static/css/common.css" type="text/css" rel="stylesheet"/>
    <script src="../../static/js/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/js/common.js" type="text/javascript"></script>
    <script src="../../static/js/notice.js" type="text/javascript"></script>
    <script src="../../static/js/regexp.js" type="text/javascript"></script>
    <script src="../../static/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <style type="text/css">
        .content {
            position: relative;
        }

        .expEnterCont {
            padding-bottom: 20px;
        }

        .expEnterCont .expEnterIcon {
            width: 20%;
            margin: 0 auto;
        }

        .expEnterCont .expEnterIcon p {
            text-align: center;
            font-weight: bold;
        }

        .submitBtn {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            background: #1f72ff;
            color: #fff;
            font-weight: bolder;
        }

        .stopvoicerecord {
            width: 40%;
            height: 50px;
            position: absolute;
            top: 20px;
            right: 40px;
            display: none;
            background: purple;
        }

        .stopvoicerecord {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            display: none;
        }

        .stopvoicerecord .voiceRecordCont {
            width: 60%;
            background: #fff;
            border-radius: 8px;
            position: absolute;
            top: calc((100% - 216px) / 2); /*30 + 110 +30 + 10 +36 == 216*/
            left: 20%;
            padding: 20px 0px 10px;
        }

        .stopvoicerecord .voiceRecordCont img {
            display: block;
            margin: 0 auto;
            width: 110px;
        }

        .stopvoicerecord .voiceRecordCont .voiceRecordState {
            margin: 0px;
            text-align: center;
            font-size: 14px;
            color: #777777;
            line-height: 30px;
        }

        .stopvoicerecord .voiceRecordCont #stopVoiceRecordBtn {
            margin: 10px auto 0;
            width: 90%;
            text-align: center;
            line-height: 36px;
            background: #3eb94e;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
            border-radius: 18px;
        }

        .background-image {
            /*width: 100%; !* 设置 div 的宽度 *!*/
            height: 120%; /* 设置 div 的高度 */
            background-image: url('../../static/img/oder.jpg'); /* 设置背景图片的路径 */
            background-size: cover; /* 背景图片大小适应div，并保持比例 */
            background-position: center; /* 背景图片在 div 中居中显示 */
            background-repeat: no-repeat; /* 禁止背景图片重复显示 */
        }

        .input-container {
            display: flex;
            align-items: center;
            font-family: Arial, sans-serif;
        }

        label {
            margin-right: 10px;
            font-size: 16px;
        }

        input {
            width: 300px;
            padding: 7px;
            font-size: 16px;
            border: 1px solid #df2a2a;
        }

        /* 定义滚动条的宽度、颜色和圆角 */
        ::-webkit-scrollbar {
            width: 8px; /* 宽度 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(220, 134, 52, 0.47); /* 滑块颜色 */
            border-radius: 4px; /* 圆角 */
        }

        ::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* 背景颜色 */
        }

        /* 鼠标悬停在滚动条上时的样式 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #333; /* 滑块颜色变化 */
        }

        /* Firefox 滚动条样式 */
        html {
            scrollbar-width: thin;
            scrollbar-color: #4285f4 #f1f1f1;
        }

        body::-webkit-scrollbar-corner {
            background-color: #f1f1f1;
        }

        .flex-container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中（如果需要的话） */
            /*height: 1000%; !* 设置容器高度为视窗高度 *!*/
            /*width: 100%*/
        }

        .qrhtml {
            /* 使用百分比设置宽度，使其在不同屏幕尺寸下都能适应 */
            width: 90%;
            /*max-width: 1200px; !* 限制最大宽度，防止过大 *!*/
            height: 1050PX; /* 高度自适应，根据内容自动调整 */
            margin: 0 auto; /* 水平居中 */
            border: none; /* 移除边框 */
            overflow: auto; /* 内容过多时出现滚动条 */
        }

        /* 媒体查询，为小屏幕设备设置不同样式 */
        @media (max-width: 768px) {
            .qrhtml {
                /* 在小屏幕上，你可以进一步调整宽度或高度 */
                max-width: 100%; /* 或者根据需要设置其他值 */
                height: 600PX; /* 高度自适应，根据内容自动调整 */
            }
        }

    </style>
</head>
<body class="background-image">
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="/" target="_blank">用户首页</a>
            <a href="/templates/controller/index.html">控制中心</a>
            <a href="//jimo.fun" target="_blank">JIMO友情🔗</a>
        </div>
    </div>
    <div class="expEnterCont">
        <div class="expEnterIcon">
            <!--            <img src="../../static/img/oder.jpg" width="200" alt="">-->
            <p id="title">控制指令下发！</p>
        </div>
        <div class="expEnterInput">
            <input id="timestamp" type="hidden" value="${timestamp}"/>
            <input id="noncestr" type="hidden" value="${nonceStr}"/>
            <input id="signature" type="hidden" value="${signature}"/>
            <input id="appId" type="hidden" value="${appId}"/>
            <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
            <input id="wxCode" type="hidden" value="${wxCode}"/>
            <div class="userInputCont">

                <div class="inputTypeCont">
                    <div class="inputTitle">选指令:</div>
                    <label for="v5"></label>
                    <select id="v5" name="oderId">
                        <option value="1">打开门窗</option>
                        <option value="2">关闭门窗</option>
                        <option value="3">浇水</option>
                    </select>
                </div>
                <div>
                    <div class="inputTypeCont">
                        <div class="inputTitle">时间:</div>

                        <div class="inputTitle">
                            <input type="number" id="v6" name="company" min="0" max="1440" value="0"
                                   placeholder="几分钟后执行，0默认为立即执行">
                        </div>
                    </div>

                </div>
                <br>
                <div class="submitBtn" type="button">确认下发指令！</div>
            </div>

        </div>
    </div>
</div>
<div class="flex-container">
    <iframe class="qrhtml" src="/templates/modules/modules.html" frameborder="no" allowfullscreen="true"></iframe>
</div>
</body>
<script src="../../static/layer/layer.js"></script>
<script src="../../static/js/jquery-3.6.4.min.js"></script>

<script type="text/javascript">
    $(function () {
        /*判断信息进行初始化处理*/
        $.get("/oder/message", null, function (message) {
            if (message.status === 200 || message.status === 201) {
                $("#v5").html("");
                // 获取 Map 中的数据
                var OderMessage = message.data;
                // 遍历 Map
                for (var key in OderMessage) {
                    if (OderMessage.hasOwnProperty(key)) {
                        var OderMessageList = OderMessage[key];

                        // 创建一个optgroup元素，用于分组显示
                        var optgroup = $("<optgroup label='" + key + "'></optgroup>");

                        // 遍历 List
                        for (var i = 0; i < OderMessageList.length; i++) {
                            var item = "<option value=\"" + OderMessageList[i].id + "\">" + OderMessageList[i].name + "(" + OderMessageList[i].moduleName + ")" + "</option>";
                            optgroup.append(item);
                        }
                        // 将optgroup添加到下拉框中
                        $("#v5").append(optgroup);
                    }
                }
            }
        });
        /*添加或修改的业务处理*/
        $(".submitBtn").click(function () {
            let val5 = $.trim($("#v5").val());
            let val6 = $.trim($("#v6").val());
            if (val5 === "" || val5.length === 0 || val6 === "" || val6.length === 0) {
                layer.msg("亲，指令不能为空啊！")
                return;
            }
            ///*JIMO-IOT_V1.3智能感知模块默认是开启的，所以在前端做一些限制，等JIMO-IOT_V1.3版本以后的优化后可撤离该方法！*/
            if (val5 == "16" || val5 == "17") {
                layer.msg("亲(●'◡'●)，智能感知模块随IOT系统启动，默认是开启状态的！")
                return;
            }
            let load = layer.load();
            $.post("/oder/messages", {
                oderId: val5,
                delay: val6,
            }, function (data) {
                layer.close(load);
                layer.msg(data.result);
                if (data.status === 200) {
                    //录入成功,返回控制中心记录页面
                    window.location.href = "/templates/controller/index.html";
                } else {
                    //录入失败
                }
            });
        });
    });

</script>
</html>